<template>
	<view>
		<view class="padding-lr">
			<form>
				<singleRowSelect :picker="companyInfo.getClassInfo" @idOfSelected="getSelectId"></singleRowSelect>
				<my-input name="公司名称:" placeholder="请输入公司名称" @inputchanged="company_name_event"></my-input>
				<my-textarea title="公司介绍:" placeholder="可以输入一些介绍公司业务的文字" @textareaChanged="company_info_event"></my-textarea>
				<my-select @chooseCity="company_address"></my-select>
				<my-textarea title="详细地址:" placeholder="请输入详细地址" @textareaChanged="company_address_info_event"></my-textarea>
				<my-input name="联系人:" placeholder="请输入联系人姓名" @inputchanged="user_name_event"></my-input>
				<my-input :maxlength="11" inputType="number" name="联系方式:" placeholder="请输入联系方式" @inputchanged="user_tel_event"></my-input>
<!-- 				<view class="cu-bar border-top bg-white">
					<view class="action text-black">
						营业执照
					</view>
				</view>
				<up-load-file upNumber="1" @upLoad="yyzz_ertificate" ></up-load-file>
				<view class="cu-bar border-top bg-white">
					<view class="action text-black">
						组织机构代码证
					</view>
				</view> -->
				<up-load-file upNumber="1" @upLoad="zjjg_ertificate"></up-load-file>
				<checkbox-group class="block" @change="CheckboxChange">
					<view class="cu-form-group justify-center">
						<checkbox class="margin-right" :class="checkbox[0].checked?'checked':''" :checked="checkbox[0].checked?true:false"></checkbox>
						<view class="title">我已阅读并同意《协议》</view>
					</view>
				</checkbox-group>
			</form>
			<my-button @tapEvent="onSubmit" :isDisabled="isDisabled"></my-button>
		</view>
	</view>
</template>

<script>
	import myButton from '@/components/myButton.vue';
	import myInput from '@/components/myInput.vue';
	import myTextarea from '@/components/myTextarea.vue';
	import mySelect from '@/components/mySelect.vue';
	import upLoadFile from '@/components/upload.vue';
	import singleRowSelect from '@/components/singleRowSelect.vue';
	import { mapState } from 'vuex';
	
	export default {
		data() {
			return {
				// 填写信息
				companyInfo: {
					company_name: '',
					company_info: '',
					company_address: null,
					company_address_info: '',
					user_name: '',
					user_tel: null,
					yyzz_imgSrc:'',
					zjjg_imgSrc:'',
					// 分类信息
					getClassInfo:[],
					// 选中id
					selectTypeId:null,
					file1: '',
					fole2: ''
				},
				checkbox: [{
					value: 'agreement',
					checked: false
				}],
				// 按钮是否隐藏
				isDisabled: true,
				ba: ''
			};
		},
		onLoad() {
			this.getClass();
		},
		computed:{
			...mapState(['openid'])
		},
		methods: {
			company_name_event: function(val) {
				this.companyInfo.company_name = val;
			},
			company_info_event: function(val){
				this.company_info = val;
			},
			company_address: function(val) {
				this.companyInfo.company_address = val;
			},
			company_address_info_event: function(val) {
				this.companyInfo.company_address_info = val;
			},
			user_name_event: function(val) {
				this.companyInfo.user_name = val;
			},
			user_tel_event: function(val) {
				this.companyInfo.user_tel = val;
			},
			yyzz_ertificate: function(val) {
				this.companyInfo.yyzz_imgSrc = val[0];
			},
			zjjg_ertificate: function(val) {
				this.companyInfo.zjjg_imgSrc = val[0]
			},
			/*
				请求分类
			*/
			getClass: function(){
				const that = this;
				uni.request({
					url:'https://wechat.lccmart.com/ygy/api/wechatapi/get_type',
					method:'POST',
					success(res) {
						that.companyInfo.getClassInfo = res.data.data;
					}
				})
			},
			/*
				获得选中分类的id
			*/
			getSelectId: function(id){
				this.companyInfo.selectTypeId = id
			},
			/* 
				提交信息
			 */
			onSubmit: function() {
				const {
					company_name,
					company_info,
					company_address,
					company_address_info,
					user_name,
					user_tel,
					yyzz_imgSrc,
					zjjg_imgSrc,
					getClassInfo,
					selectTypeId
				} = this.companyInfo;
				let yyzz_imgSrc64 = '';
				let zjjg_imgSrc64 = '';
							
				if(yyzz_imgSrc != ''){	
					yyzz_imgSrc64 = this.urlTobase64(yyzz_imgSrc);
				}
				if(zjjg_imgSrc != ''){
					zjjg_imgSrc64 = this.urlTobase64(zjjg_imgSrc);
				}
				const openid = this.openid;
				if(company_name != '' && company_address != '' && company_address_info != '' && user_name!= '' && user_tel != '' && yyzz_imgSrc != '' && zjjg_imgSrc != '' && selectTypeId != '' && getClassInfo != []){
					const company_address_str = company_address.toString();
					uni.request({
						url: 'https://wechat.lccmart.com/ygy/api/wechatapi/add_customer',
						method: 'POST',
						data:{
							openid: openid,
							type: selectTypeId,
							name: company_name,
							detail: company_info,
							link_man: user_name,
							phone: user_tel,
							area: company_address_str,
							address: company_address_info,
							file1: yyzz_imgSrc64,
							file2: zjjg_imgSrc64
						},
						success(res) {
							console.log(res)
							if(res.status == 1){
								uni.showToast({
									title:'成功',
									icon: 'none',
									success() {
										this.$store.mapMutations('saveTypeId',selectTypeId);
										console.log(this.$store.state.typeid)
									}
								})	
							}else{
								console.log('失败')
							}
						}
					})
				}else{
					uni.showToast({
						title:'请补全信息',
						icon: 'none',
					})	
				}
			},
			CheckboxChange(e) {
				this.checkbox[0].checked = !this.checkbox[0].checked;
				this.changeBtnStatus();
			},
			/* 
				改变按钮状态
			 */
			changeBtnStatus() {
				this.isDisabled = !this.checkbox[0].checked
			},
			/* 
				获取图片信息转base64
			 */
			urlTobase64(url) {
			  const imgData = uni.getFileSystemManager().readFileSync(url, 'base64');
			  const base64 = 'data:image/jpeg;base64,' + imgData;
			  return base64;
			}
		},
		components: {
			myButton,
			myInput,
			myTextarea,
			mySelect,
			upLoadFile,
			singleRowSelect
		}
	}
</script>

<style>
	page{
		background-color: #fff;
	}
	.button_box {
		margin-bottom: 30rpx;
	}

	.grid.grid-square>view {
		left: 50%;
		transform: translate(-50%);
	}

	.block {
		width: 100%;
	}

	.border-top {
		border-top: 1px solid #eee;
	}
</style>